<template>
    <div class="footer">
        <el-row>
            <div class="mid-width">
                <div class="foot-nav">
                    <span class="itme-nav" :span="4" v-for="(item, index) in navs" :key="index"><span>{{item.navTit}}</span><span v-if="item.navId==5?'':true">&nbsp;&nbsp;&nbsp;&nbsp;|</span></span>
                </div>
                <p>地址：福建省南安市145号 邮编：362300 网站统计 <br/>
                    建议使用：1280*720以上分辨率，IE8.0以上版本浏览器</p>
            </div>
        </el-row>
    </div>
</template>

<script>
    import vm from '@/event'
    export default {
        name: 'footer-bar',
        data() {
            return {
                navs:[
                    {
                        navId: 0,
                        navTit: "首页",
                        url: "",
                    },
                    {
                        navId: 1,
                        navTit: "政策法规",
                        url: ""
                    },
                    {
                        navId: 2,
                        navTit: "通知公告",
                        url: ""
                    },
                    {
                        navId: 3,
                        navTit: "土地信息",
                        url: ""
                    },
                    {
                        navId: 4,
                        navTit: "文件",
                        url: ""
                    },
                    {
                        navId: 5,
                        navTit: "联系方式",
                        url: ""
                    }
                ]
            }
        },
        methods: {
            receive() {
                vm.$on('two-to-one', (data) => {
                    console.log(data);
                    this.navs = data;
                })
            }
        },
        mounted(){
            this.receive()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    div {
        &.footer {
            padding: 20px 0;
            background: #545c64;
            color: #fff;
            .mid-width {
                text-align: center;
                .foot-nav {
                    margin-bottom: 20px;
                    .itme-nav {
                        padding: 0 10px;

                    }
                }
                p {
                    color: #D3D3D3;
                }
            }
        }
    }

</style>